import * as React from 'react';
import { get } from 'lodash';
import { Link } from 'react-router-dom';

import { Card, Select, Form, Input, Button, Icon } from 'antd';
import LoadableComponent from 'components/common/LoadableComponent';
const LoadableDragger = LoadableComponent(() => import('components/common/Dragger'));
const LoadableMedia = LoadableComponent(() => import('components/common/Media'));

const FormItem = Form.Item;

interface EditFormProps {
  onSubmit: (data: Record<string, any>) => any;
  editWord: any;
  form: any;
  loading: boolean;
  levels: any[];
}
/**
 * Word新增或修改
 */
class EditForm extends React.Component<EditFormProps> {
  handleSubmit = (e: any) => {
    e.preventDefault();
    this.props.form.validateFields((err: any, values: any) => {
      if (err) return;

      this.props.onSubmit(values);
    });
  };

  render() {
    const { editWord, loading, form, levels } = this.props;
    const { getFieldDecorator } = form;

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 14 },
      },
    };
    const tailFormItemLayout = {
      wrapperCol: {
        xs: {
          span: 24,
          offset: 0,
        },
        sm: {
          span: 14,
          offset: 6,
        },
      },
    };

    return (
      <Form onSubmit={this.handleSubmit}>
        <FormItem {...formItemLayout} label="单词">
          {getFieldDecorator('word', {
            rules: [
              {
                required: true,
                message: '单词是必填项',
              },
            ],
            initialValue: get(editWord, 'word', null),
          })(<Input placeholder="填写单词" />)}
        </FormItem>
        <FormItem {...formItemLayout} label="中文">
          {getFieldDecorator('chinese', {
            rules: [
              {
                required: true,
                message: '单词中文是必填项',
              },
            ],
            initialValue: get(editWord, 'chinese', null),
          })(<Input placeholder="填写单词中文" />)}
        </FormItem>
        <FormItem {...formItemLayout} label="等级">
          {getFieldDecorator('level', {
            rules: [
              {
                required: true,
                message: '等级是必填项',
              },
            ],
            initialValue: get(editWord, 'level', undefined),
          })(
            <Select
              showSearch={true}
              placeholder="请选择单词等级"
              optionFilterProp="children"
              notFoundContent="没有等级数据，先去添加吧"
              filterOption={(input: any, option: any) => {
                return option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0;
              }}>
              {levels.map((item: any) => {
                return (
                  <Select.Option key={item.level} value={item.level}>
                    L{item.level}
                  </Select.Option>
                );
              })}
            </Select>
          )}
        </FormItem>

        <FormItem {...tailFormItemLayout}>
          <Button type="primary" htmlType="submit" size="large" loading={loading}>
            提交
          </Button>
        </FormItem>
      </Form>
    );
  }
}

export default Form.create()(EditForm);
